 <template>
     <view>
				 <image :src="imagesUrl" mode=""></image>
         <progress :percent="percent" strock-width="10"></progress>
         <button type="primary" @click="selectImage">选择图片</button>
				 <button type="primary" @click="uploadImage">上传图片</button>
				 
				 
				 <!-- #ifdef MP-WEIXIN  -->
				  <button type="primary" @click="uploadFileFnWeiXin">选择文件</button>
				 <!-- #endif  -->
				 <!-- #ifdef H5  -->
					<view ref="input" class="input"></view> 
				 <!-- #endif  -->
				 <!-- <button type="primary" open-type="getUserInfo" @getuserinfo="wxGetUserInfo">登录</button> -->
     </view>
 </template>
 
 
 <script>
	 import testJson from '../../static/json/test.json'
     // 注册一个进度条
     var _self;
     
     export default {
         data() {
             return {
                 percent:0,
								 imagesUrl:'',
								 imagesFile:'',//要上传图片的流
             }
         },
         mounted() {
             _self = this;
						 console.log(testJson);
						// #ifdef H5
							let input = document.createElement('input');
							let label = document.createElement('label');
							input.type = 'file';
						  input.id = 'file';
							input.style.display = 'none';
							label.setAttribute('for','file');
							label.className = 'fileLabel';
							label.innerHTML = '选择文件';
							label.style.display = 'inline-block';
							label.style.width = '90%';
							label.style.padding = '10px 0';
							// label.style.borderRadius = '10px';
							input.onchange = (event) => {  
								let file = input.files[0];
									// console.log(file,'input')  
									_self.uploadFileSuccess(file);
							};
							this.$refs.input.$el.appendChild(label);
							this.$refs.input.$el.appendChild(input);
						// #endif
        },
        methods: {
					uploadFileFnWeiXin(){
						wx.chooseMessageFile({
							count: 10,
							type: 'all',
							success (res) {
								// tempFilePath可以作为img标签的src属性显示图片
								const tempFilePaths = res.tempFiles;
								_self.uploadFileSuccess(tempFilePaths[0]);
								// console.log(tempFilePaths)
							}
						})
					},
					uploadFileSuccess(file){
						// #ifdef H5
						let formData = new FormData();
						formData.append("file",file);  //上传一个files对象
						console.log(formData,'上传formData')
						// #endif
						// console.log(file.path);
						// return;
					  let uper = uni.uploadFile({
							 // 需要上传的地址
								url: 'https://httpbin.org/post',
								// #ifdef MP-WEIXIN
								filePath: file.path,
								// #endif
								// #ifdef H5
							  file: formData,
							 // #endif
							 name: 'file',
							 formData: {
									'user': 'test'
							 },
							 success(res1) {
									 // 显示上传信息
									 console.log(res1)
							 },
							 error(err){
								 console.log(err,'err')
							 }
					 });
					},
					selectImage(){
							 uni.chooseImage({
									 count: 1,
									 sizetype: ['compressed'],
									 success(res){
											 // tepFliePaths 保存图片路径 
											 var imgFiles = res.tempFilePaths[0];
											 // 因为没写下标， 直接以数组形式输出
											 // console.log(imgFiles)
											 _self.imagesUrl = imgFiles;
											 _self.imagesFile = res.tempFiles[0];
											 // console.log(res.tempFiles[0])
									 }
							 })
					 },
					uploadImage(){
						// console.log(_self.imagesUrl)
							 var uper = uni.uploadFile({
									 // 需要上传的地址
									  url: 'https://httpbin.org/post',
									 // filePath  需要上传的文件
									 filePath: _self.imagesUrl,
									 name: 'file',
									 formData: {
											'user': 'test'
									 },
									 success(res1) {
											 // 显示上传信息
											 console.log(res1)
									 },
									 error(err){
										 console.log(err,'err')
									 }
							 });
							 // onProgressUpdate 上传对象更新的方法
							 // uper.onProgressUpdate(function(res){
								// 	 // 进度条等于 上传到的进度
								// 	 _self.percent = res.progress
								// 	 console.log('上传进度' + res.progress)
								// 	 console.log('已经上传的数据长度' + res.totalBytesSent)
								// 	 console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend)
							 // })
             }
         }
			}
 </script>
 
 <style lang="scss">
	.input{
		color: #fff;
    background-color: #007aff;
		text-align: center;
		// padding:20rpx 0;
		border-radius: 10rpx;
	}
 </style>